<template>
    <div>
        <!-- 打印管理弹框 -->
        <el-dialog :close-on-click-modal="false"  width="771px" title="打印管理" :visible.sync="show_carList">
            <el-table  highlight-current-row :data="carList" border>
                <el-table-column align="center" label="图片" width="70">
                    <template slot-scope="scope">
                        <img :src="scope.row.thumb" width="50" height="50" alt="">
                    </template>
                </el-table-column>
                <el-table-column align="center" label="礼品名称" prop="name"></el-table-column>
                <el-table-column align="center" label="会员兑换票数" prop="ticket_value_vip" width="120"></el-table-column>
                <el-table-column align="center" label="非会员兑换票数" prop="ticket_value" width="120"></el-table-column>
                <el-table-column align="center" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="delClick(scope.$index)" type="text" style="font-size:18px;color:#f56c6c"
                            icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 预览弹框 -->
            <el-dialog :close-on-click-modal="false"  width="540px" style="margin-top:5vh" title="预览样式" :visible.sync="viewDialog" append-to-body>
                <el-button style="margin-right:0" size="small" type="primary" @click="goPrint">确认打印</el-button>
                <div ref="print" style="width:375px;margin:0 auto" id="viewPrinter">
                    <div class="print_list3">
                        <div v-for="(p,i) of printer_list" :key="i" class="print_item">
                            <barcode :value="p.no" :options="barcode_option" tag="svg"></barcode>
                            <div class="name">{{p.name}}</div>
                        </div>
                    </div>
                </div>
            </el-dialog>
            <div class="bottom_box">
                <el-button type="text" size="small" @click="delCarListClick()">清空打印列表</el-button>
                <el-button class="pull-right" size="small" type="primary" @click="goView()">打印预览</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件
    import { integer1to99 } from '@/utils/validate'
    export default {
        props: ["categoryId", "carList", "list"],
        components: {
            'barcode': VueBarcode
        },
        data() {
            return {
                ws: {},
                viewInfo: {},
                viewDialog: false,
                wsUrl: 'ws://localhost:2012',
                printer_list: [],
                printerForm: {
                    style_type: '',
                    id: '',
                },
                barcode_option:{
                    displayValue: true, //是否默认显示条形码数据
                    background: '#fff', //条形码背景颜色
                    width:'1px',
                    height: '44px',
                    textMargin:1,//设置条形码和文本之间的间距
                    fontSize: '16px' //字体大小
                },
                in_printer: false,
                show_carList: false,
            }
        },
        created() {
        },
        methods: {
            goPrint(){
                this.$print(this.$refs.print);
                this.viewDialog=false;
            },
            goView(){
                // console.log(this.carList);
                // if (this.printerForm.style_type == '') {
                //     this.$message({ type: 'error', message: '请先选择标签样式再预览' });
                //     return;
                // }
                this.printer_list=[];
                console.log(this.carList,111)
                let canPrint=true;
                for(let item of this.carList){
                    item.car_gift_num=3;
                    if(!integer1to99(item.car_gift_num)){
                        this.$message.error('打印数量只能为1-99的整数');
                        canPrint=false;
                        break ;
                    }else{
                        let i=0;
                        do {
                            this.printer_list.push({no:item.no_obsolete,name:item.name,money:item.money_cost,ticket:item.ticket_value});
                            i++;
                        } while (i<item.car_gift_num*1);
                    }                   
                }
                if(!canPrint){
                    return ;
                }
                this.viewDialog=true;
                // setTimeout(()=>{
                //     this.$print(this.$refs.print);
                //     this.viewDialog=false;
                // },0)
            },
            inputBurl(row){
                if(!integer1to99(row.car_gift_num)){
                    row.car_gift_num=1;
                }
            },
            styleTypeChange() {
                this.carList.forEach((val, i) => {
                    val.car_gift_num = this.printerForm.style_type == 3 ? '' : 1
                });
            },
            watch_in_car() {
                this.list.forEach((val1, i1) => {
                    val1.in_car = false
                    this.carList.forEach((val2, i2) => {
                        if (val1.gift_id == val2.gift_id) {
                            val1.in_car = true
                        }
                    });
                });
            },
            showCar() {
                this.printerForm.style_type = '';
                this.printerForm.id = '';
                this.carList.length>0&&this.carList.forEach(val=>{
                    val.car_gift_num="";
                })
                // this.connection();
                this.show_carList = true;
            },
            // 清空购物车
            delCarListClick() {
                this.carList.splice(0, this.carList.length);
                this.watch_in_car()
            },
            delClick(index) {
                this.carList.splice(index, 1);
                this.watch_in_car()
            },
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss">
    .print_list1{
        .print_item{
            width: 260px;
            height: 150px;
            div{
                margin: 0 0 10px 40px;
                font-size: 16px;
            }
            .name{
                padding-top: 30px;
                width: 150px;
                height: 64px;
                overflow: hidden;
            }
        }
    }
    .print_list3{
        display: flex;
        flex-wrap: wrap;
        .print_item{
            padding-left: 5px;
            box-sizing: border-box;
            width: 125px;
            height: 95px;
            text-align: center;
            position: relative;
            .name{
                width: 100px;
                white-space: nowrap;
                overflow: hidden;
                font-size: 12px;
                position: absolute;
                left: 15px;
                bottom: 5px;
            }
        }
    }
</style>